<template>
  <div class="my_topic common_page_inBox">
    <div class="topic_toggle clearfix">
      <div class="cur fl">我发布的</div>
      <div class="fl">我参与的</div>
    </div>

    <div class="topic_list">
      <ul>
        <li>
          <div class="topic_list_top clearfix">
            <img class="fl" src="../../../static/img/user_img.png" alt="">
            <div>
              <h5>名字</h5>
              <p>2018-11-12 12:20</p>
            </div>
          </div>
          <div class="topic_list_title clearfix">
            <h4 class="fl">怎样建房</h4>
          </div>
          <div class="topic_list_content textOverflow2">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
          <div class="answer_new">
            <div class="answer_top">
              <img class="fl" src="../../../static/img/user_img.png" alt="">
              <div>
                <h6>回复者</h6>
                <p>2018-11-20 12:54</p>
              </div>
            </div>
            <div class="answer_content">
              只显示最新的一条，回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答
            </div>
          </div>
          <div class="topic_list_bottom clearfix">
            <span class="fr">
              详情
              <!-- <i class="el-icon-arrow-down"></i> -->
            </span>
            <em class="fr">125个回答</em>
          </div>
        </li>
        <li>
          <div class="topic_list_top clearfix">
            <img class="fl" src="../../../static/img/user_img.png" alt="">
            <div>
              <h5>名字</h5>
              <p>2018-11-12 12:20</p>
            </div>
          </div>
          <div class="topic_list_title clearfix">
            <h4 class="fl">怎样建房</h4>
          </div>
          <div class="topic_list_content textOverflow2">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
          <div class="answer_new">
            <div class="answer_top">
              <img class="fl" src="../../../static/img/user_img.png" alt="">
              <div>
                <h6>回复者</h6>
                <p>2018-11-20 12:54</p>
              </div>
            </div>
            <div class="answer_content">
              只显示最新的一条，回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答回答
            </div>
          </div>
          <div class="topic_list_bottom clearfix">
            <span class="fr">
              详情
              <!-- <i class="el-icon-arrow-down"></i> -->
            </span>
            <em class="fr">125个回答</em>
          </div>
        </li>
      </ul>
      <div style="text-align: center;">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      viewAllComment: false
    };
  },
  methods: {
    changeViewAll() {
      this.viewAllComment = !this.viewAllComment;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../../static/jyj_index.scss";
$pdl: 55px;
.common_page_inBox {
  width: 980px;
  margin: 50px auto;
}
.topic_toggle {
  margin-bottom: 20px;
  border-bottom: 1px solid $bgBorder;
  div {
    width: 100px;
    color: $black;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    border-radius: 3px;
    background-color: $bgBorder;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    &.cur {
      color: $white;
      background-color: $orange;
    }
    &:last-child {
      margin-left: 1px;
    }
  }
}
.topic_list {
  li {
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid $bgBorder;
    .topic_list_top{
      img{
       width: 40px;
       height: 40px;
       border-radius: 50%; 
      }
      div{
        padding-left: $pdl;
        h5{
          line-height: 20px;
        }
        p{
          font-size: 12px;
          color: $wordGreen;
          line-height: 20px;
        }
      }
    }
    .topic_list_title{
      margin: 10px 0;
      padding-left: $pdl;
      h4{
        cursor: pointer;
        font-size: 16px;
        &:hover{
          color: $orange;
        }
      }
    }
    .topic_list_content{
      padding-left: $pdl;
      line-height: 24px;
      margin-bottom: 10px;
    }
    .topic_list_bottom{
      span{
        height: 20px;
        color: $orange;
        padding: 0 8px;
        cursor: pointer;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        display: inline-block;
        // border: 1px solid $orange;
      }
      em{
        color: $wordGreen;
        font-size: 12px;
        line-height: 20px;
        font-style: normal;
      }
    }
  }
}
.answer_new{
  padding-left: $pdl;
  .answer_top{
    img{
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
    div{
      padding-left: 50px;
      h6{
        font-weight: normal;
        line-height: 20px;
      }
      p{
        color: $wordGreen;
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
  .answer_content{
    font-size: 12px;
    padding-left: 50px;
    line-height: 24px;
  }
}
</style>
